<!-- 充值页面 -->
<template>
	<view >
		<view class="card-warp">
			<block v-for="(item,index) in 6" :key="index">
				<view class="card-item u-f-dcc" :class="[index==0?'jian':'',selectedIndex==index?'active':'']" @tap="changeIndex(index)">
					<view>充值：￥ <text style="font-size: 50rpx;">1000</text></view>
					<view>多送 200.00元</view>
					<image v-show="selectedIndex==index" class="icon-duigou" src="/static/images/icon-duigou.png" mode="aspectFill"></image>
				</view>
			</block>
		</view>
		<view class="btn-wrap">
			<button type="default" data-url="../chargeSuc/chargeSuc" @tap="$jumpPage">充值</button>
			<view class="tips">
				<view>说明：通过商户账号代用户充值可获得3%的佣金</view>
				<view>例如：用户自行充值1000元，商户账号仅需支付970元</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex:0 // 选中的充值类型
			};
		},
		onLoad() {
			
		},
		methods:{
			changeIndex(index) {
				this.selectedIndex = index;
			}
		}
	}
</script>

<style lang="scss">
.card-warp {
	margin: 30rpx;
	display: flex;
	flex-wrap: wrap;
	min-height: 600rpx;
	.card-item {
		position: relative;
		width: 330rpx;
		height: 220rpx;
		border-radius: 14rpx;
		border: 1px solid #E6E6E6;
		box-shadow: 0px 0px 8px 0px rgba(24, 24, 24, 0.05), 0px 0px 8px 0px rgba(24, 24, 24, 0.05);
		margin-bottom: 20rpx;
		transition: all 0.3s;
		
		.icon-duigou {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 40rpx;
		}
		&:nth-child(2n+1) {
			margin-right: 30rpx;
		}
		&.jian {
			background-color: RGBA(255, 246, 206, 1);
			border: 1rpx solid 	rgba(255, 206, 0, 1);
			
			&::after {
				position: absolute;
				top: -1rpx;
				left: -1rpx;
				content: '荐';
				width: 70rpx ;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: RGBA(254, 74, 74, 1);
				color: #FFFFFF;
				font-size: 30rpx;
				border-radius: 14rpx 0;
			}
		}
		&.active {
			border: 1rpx solid 	rgba(255, 206, 0, 1);
			transform: scale(1.1);
			
		}
		
		>view:nth-child(1) {
			color: rgba(51, 51, 51, 1);
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
		>view:nth-child(2) {
			color: rgba(102, 102, 102, 1);
		}
	}
}
.btn-wrap {
	margin-top: 150rpx;
	button {
		margin: 0 20rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 206, 0, 1);
	}
	.tips {
		margin: 20rpx 50rpx;
		color: rgba(136, 136, 136, 1);
		font-size: 24rpx;
		
		>view:nth-child(2) {
			margin-left: 70rpx;
		}
	}
}
</style>
